<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Popup position</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="./src/PopupLayoutTest.js"></script>
    <style>
      .samples {
        align-items: center;
        display: grid;
        gap: 30px;
        grid-template-columns: repeat(5, 1fr);
        justify-items: center;
      }

      .rowLabel {
        justify-self: start;
      }

      popup-layout-test {
        display: grid;
        height: 92px;
        width: 152px;
      }

      .largeBlock {
        border: 5px solid white;
        box-sizing: border-box;
        height: 120px;
        width: 200px;
      }
    </style>
  </head>

  <body role="main">
    <h2>Logical positions (left-to-right, room available)</h2>
    <div class="samples">
      <div class="rowLabel"></div>
      <div class="columnLabel">start</div>
      <div class="columnLabel">center</div>
      <div class="columnLabel">stretch</div>
      <div class="columnLabel">end</div>

      <div class="rowLabel">column</div>
      <div>
        <!--
          This layout is the same as the one covered by the unit test
          "column/start layout, room available" in layoutPopup.tests.js
        -->
        <popup-layout-test
          popup-align="start"
          popup-direction="column"
          style="align-items: start; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-direction="column"
          popup-align="center"
          style="align-items: start; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="stretch"
          popup-direction="column"
          style="align-items: stretch; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="end"
          popup-direction="column"
          style="align-items: start; justify-items: center"
        ></popup-layout-test>
      </div>

      <div class="rowLabel">column-reverse</div>
      <div>
        <popup-layout-test
          popup-align="start"
          popup-direction="column-reverse"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="center"
          popup-direction="column-reverse"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="stretch"
          popup-direction="column-reverse"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="end"
          popup-direction="column-reverse"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>

      <div class="rowLabel">row</div>
      <div>
        <popup-layout-test
          popup-align="start"
          popup-direction="row"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-direction="row"
          popup-align="center"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="stretch"
          popup-direction="row"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="end"
          popup-direction="row"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>

      <div class="rowLabel">row-reverse</div>
      <div>
        <popup-layout-test
          popup-align="start"
          popup-direction="row-reverse"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="center"
          popup-direction="row-reverse"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>

      <div>
        <popup-layout-test
          popup-align="stretch"
          popup-direction="row-reverse"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="end"
          popup-direction="row-reverse"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>
    </div>

    <h2>Physical positions (left-to-right, room available)</h2>
    <div class="samples">
      <div class="rowLabel"></div>
      <div class="columnLabel">left or top</div>
      <div class="columnLabel">center</div>
      <div class="columnLabel">stretch</div>
      <div class="columnLabel">right or bottom</div>

      <div class="rowLabel">above</div>
      <div>
        <popup-layout-test
          popup-align="left"
          popup-direction="above"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="center"
          popup-direction="above"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="stretch"
          popup-direction="above"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="right"
          popup-direction="above"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>

      <div class="rowLabel">below</div>
      <div>
        <popup-layout-test
          popup-align="left"
          popup-direction="below"
          style="align-items: start; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-direction="below"
          popup-align="center"
          style="align-items: start; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="stretch"
          popup-direction="below"
          style="align-items: start; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="right"
          popup-direction="below"
          style="align-items: start; justify-items: center"
        ></popup-layout-test>
      </div>

      <div class="rowLabel">left</div>
      <div>
        <popup-layout-test
          popup-align="top"
          popup-direction="left"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="center"
          popup-direction="left"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="stretch"
          popup-direction="left"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="bottom"
          popup-direction="left"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>

      <div class="rowLabel">right</div>
      <div>
        <popup-layout-test
          popup-align="top"
          popup-direction="right"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-direction="right"
          popup-align="center"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="stretch"
          popup-direction="right"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="bottom"
          popup-direction="right"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>
    </div>

    <h2>Logical positions (right-to-left)</h2>
    <div class="samples">
      <div class="rowLabel"></div>
      <div class="columnLabel">start</div>
      <div class="columnLabel">center</div>
      <div class="columnLabel">stretch</div>
      <div class="columnLabel">end</div>

      <div class="rowLabel">column</div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="start"
          popup-direction="column"
          style="align-items: start; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-direction="column"
          popup-align="center"
          style="align-items: start; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="stretch"
          popup-direction="column"
          style="align-items: start; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="end"
          popup-direction="column"
          style="align-items: start; justify-items: center"
        ></popup-layout-test>
      </div>

      <div class="rowLabel">column-reverse</div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="start"
          popup-direction="column-reverse"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="center"
          popup-direction="column-reverse"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="stretch"
          popup-direction="column-reverse"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="end"
          popup-direction="column-reverse"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>

      <div class="rowLabel">row</div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="start"
          popup-direction="row"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-direction="row"
          popup-align="center"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="stretch"
          popup-direction="row"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="end"
          popup-direction="row"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>

      <div class="rowLabel">row-reverse</div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="start"
          popup-direction="row-reverse"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="center"
          popup-direction="row-reverse"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="stretch"
          popup-direction="row-reverse"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          dir="rtl"
          popup-align="end"
          popup-direction="row-reverse"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>
    </div>

    <h2>Flipping strategy</h2>
    <div class="samples">
      <div class="rowLabel"></div>
      <div class="columnLabel">room available</div>
      <div class="columnLabel">flip horizontal to fit</div>
      <div class="columnLabel">flip vertical to fit</div>
      <div class="columnLabel">flip both to fit</div>

      <div class="rowLabel">column / start</div>
      <div>
        <popup-layout-test
          popup-align="start"
          popup-direction="column"
          style="align-items: start; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="start"
          popup-direction="column"
          style="align-items: start; justify-items: end"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="start"
          popup-direction="column"
          style="align-items: end; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <!--
          This layout is the same as the one covered by the unit test
          "column/start layout, flip both to fit" in layoutPopup.tests.js
        -->
        <popup-layout-test
          popup-align="start"
          popup-direction="column"
          style="align-items: end; justify-items: end"
        ></popup-layout-test>
      </div>

      <div class="rowLabel">column / center</div>
      <div>
        <popup-layout-test
          popup-align="center"
          popup-direction="column"
          style="align-items: start; justify-items: center"
        ></popup-layout-test>
      </div>
      <div></div>
      <div>
        <popup-layout-test
          popup-align="center"
          popup-direction="column"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>
      <div></div>

      <div class="rowLabel">column / stretch</div>
      <div>
        <popup-layout-test
          popup-align="stretch"
          popup-direction="column"
          style="align-items: start; justify-items: center"
        ></popup-layout-test>
      </div>
      <div></div>
      <div>
        <popup-layout-test
          popup-align="stretch"
          popup-direction="column"
          style="align-items: end; justify-items: center"
        ></popup-layout-test>
      </div>
      <div></div>

      <div class="rowLabel">row / start</div>
      <div>
        <popup-layout-test
          popup-align="start"
          popup-direction="row"
          style="align-items: start; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="start"
          popup-direction="row"
          style="align-items: start; justify-items: end"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="start"
          popup-direction="row"
          style="align-items: end; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="start"
          popup-direction="row"
          style="align-items: end; justify-items: end"
        ></popup-layout-test>
      </div>

      <div class="rowLabel">row / center</div>
      <div>
        <popup-layout-test
          popup-align="center"
          popup-direction="row"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="center"
          popup-direction="row"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>
      <div></div>
      <div></div>

      <div class="rowLabel">row / stretch</div>
      <div>
        <popup-layout-test
          popup-align="stretch"
          popup-direction="row"
          style="align-items: center; justify-items: start"
        ></popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          popup-align="stretch"
          popup-direction="row"
          style="align-items: center; justify-items: end"
        ></popup-layout-test>
      </div>
      <div></div>
      <div></div>
    </div>

    <h2>Constrain to bounds</h2>
    <div class="samples">
      <div class="rowLabel"></div>
      <div class="columnLabel">column</div>
      <div class="columnLabel">column-reverse</div>
      <div class="columnLabel"></div>
      <div class="columnLabel"></div>

      <div class="rowLabel">too big</div>
      <div>
        <popup-layout-test
          class="tooLarge"
          popup-align="start"
          popup-direction="column"
          style="align-items: start; justify-items: center"
        >
          <div class="largeBlock"></div>
        </popup-layout-test>
      </div>
      <div>
        <popup-layout-test
          class="tooLarge"
          popup-align="start"
          popup-direction="column-reverse"
          style="align-items: end; justify-items: center"
        >
          <div class="largeBlock"></div>
        </popup-layout-test>
      </div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>
